<!-- 购物车页面     -->

<template>
  <div class="cart_box">
    <van-checkbox-group v-model="result">
      <van-checkbox
        v-for="item in cartList"
        :key="item.id"
        :name="item"
        @click="singleCheckFn()"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
      /></van-checkbox>
    </van-checkbox-group>

    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="allCheckFn">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { getCartData } from "@/utils/http.js";
export default {
  data() {
    return {
      cartList: {}, //	商品总列表
      cartTotal: {}, // 购物车数据
      result: [], //选中的商品集合  里面存放的是选中的name，也就是item
      checked: false,
    };
  },

  methods: {
    //单选
    singleCheckFn() {
      // getCartChecked({ isChecked: 0, productIds: [] }).then((res) => {
      //   console.log(res);
      // });
      // console.log(this.result);
      if (this.result.length == this.cartList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      console.log(this.result.map());
    },
    //全选
    allCheckFn() {
      if (this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },
    onSubmit() {},
  },

  created() {
    //获取购物车数据
    getCartData().then((res) => {
      // console.log(res);
      this.cartList = res.data.data.cartList;
      this.cartTotal = res.data.data.cartTotal;
      console.log(this.cartList);
    });
  },

  computed: {
    // 计算总价
    totalPrice() {
      let total = 0;
      this.result.map((item) => {
        total += item.retail_price * item.number;
      });
      return total * 100;
    },
  },
};
</script>

<style lang='less'>
.van-checkbox__label {
  flex: 1;
}
.cart_box {
  padding-bottom: 100px;
  box-sizing: border-box;
  .van-submit-bar {
    bottom: 50px;
  }
}
</style>